<template>
  <!--  jiera-->
  <div class='bg-white rounded'>
    <div class='w-full h-10 bg-gradient-to-r from-[#c0e3ff] to-blue-200 leading-10' style='font-size: 18px;'
    >🔥 热门贴
    </div>
    <div style='height:350px'>
      <div
        v-for='item in taskListData'
        :key='item.id'
        @click.stop='!!true?()=>taskDetail(item.id as number):()=>{}'
        v-login='!!true?()=>taskDetail(item.id as number):undefined'
      >
        <div style='height: 12px'></div>
        <div style='font-size: 18px;'>&nbsp;&nbsp;{{ item.title }}&nbsp;&nbsp;🔥
        </div>
      </div>
    </div>
  </div>
</template>

<script lang='ts' setup>

import {onMounted} from 'vue'
import {useRouter} from 'vue-router'

const taskListData = ref([])
const pagination = ref({
  pageSize: 10,
  pageNum: 1,
  total: 0,
})

// 获取热门任务列表
const getTaskListData = async () => {
  const queryData = {
    type: 5,
    x: undefined,
    y: undefined,
    pageSize: pagination.value.pageSize,
    pageNum: pagination.value.pageNum,
  }
  const result = await service.task.list(queryData)
  if (result.list && result.list.length > 0) {
    taskListData.value = result.list
  } else {
    taskListData.value = []
  }
}

onMounted(async () => {
  getTaskListData()
})

const router = useRouter()

const taskDetail = (id: number) => {
  router.push(`/main/task/${id}`)
}

</script>
